<template>
  <div ref="dom" class="charts chart-word-cloud"></div>
</template>

<script>
import * as echarts from "echarts";
import tdTheme from "./theme.json";
// import { on, off } from '@/libs/tools'
// import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud";
// echarts.registerTheme("tdTheme", tdTheme);
export default {
  name: "ChartWordCloud",
  props: {
    value: {
      type: Array,
    },
    title: {
      type: String,
    },
  },
  data() {
    return {
      dom: null,
    };
  },
  watch: {
    value: {
      deep: true,
      handler(val) {
        this.intChart();
      },
    },
    series: {
      deep: true,
      handler(val) {
        this.intChart();
      },
    },
  },
  methods: {
    resize() {
      this.dom.resize();
    },
    init() {
      // 基于准备好的dom，初始化echarts实例
      var option = {
        title: {
          text: "热词",
          x: "center",
        },
        tooltip: {},
        series: [
          {
            type: "wordCloud",
            // The shape of the "cloud" to draw. Can be any polar equation represented as a
            // callback function, or a keyword present. Available presents are circle (default),
            // cardioid (apple or heart shape curve, the most known polar equation), diamond (
            // alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.
            shape: "circle", // triangle
            // A silhouette image which the white area will be excluded from drawing texts.
            // The shape option will continue to apply as the shape of the cloud to grow.
            // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
            // Default to be put in the center and has 75% x 80% size.
            left: "center",
            top: "center", // 位置相关设置
            width: "70%",
            height: "80%",
            right: null,
            bottom: null,
            // Text size range which the value in data will be mapped to.
            // Default to have minimum 12px and maximum 60px size.
            sizeRange: [12, 60], // 用来调整字的大小范围
            // Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45
            rotationRange: [-90, 90], // 用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
            rotationStep: 45,
            // size of the grid in pixels for marking the availability of the canvas
            // the larger the grid size, the bigger the gap between words.
            gridSize: 8, // 用来调整词之间的距离
            // set to true to allow word being draw partly outside of the canvas.
            // Allow word bigger than the size of the canvas to be drawn
            // drawOutOfBound: false,
            // If perform layout animation.
            // NOTE disable it will lead to UI blocking when there is lots of words.
            layoutAnimation: true,
            // Global text style
            // 随机生成字体颜色
            textStyle: {
              // fontFamily: "sans-serif",
              // fontWeight: "bold",
              // Color can be a callback function or a color string
              color: function () {
                // Random color
                return (
                  "rgb(" +
                  [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                  ].join(",") +
                  ")"
                );
              },
            },
            emphasis: {
              focus: "self",
              textStyle: {
                shadowBlur: 10,
                shadowColor: "#333",
              },
            },
            // Data is an array. Each array item must have name and value property.
            data: this.value,
          },
        ],
      };
      this.dom = echarts.init(this.$refs.dom, "tdTheme");
      this.dom.setOption(option, true);
    },
  },
  mounted() {
    this.init();
  },
};
</script>